import { reactive } from "vue";

export const useDragDomHook = (focusData, lastSelectBlock) => {
    let dragState = {
        startX: 0,
        startY: 0,
        startPositon: [],
        lines: []
      }

      const markLine = reactive({
        x: null,
        y: null
      })
  
      const mousedown = (e) => {

        let {width: Bwidth, height: Bheight} = lastSelectBlock.value
  
        dragState = {
          startX: e.clientX,
          startY: e.clientY,
          startTop: lastSelectBlock.value.top,
          startLeft: lastSelectBlock.value.left,
          startPositon: focusData.value.focus.map(item => ({
            top: item.top,
            left: item.left
          })),
          lines: (() => {
            let {unfocus} = focusData.value
            let lines = {x: [], y: []}
            unfocus.forEach(item => {
              let {top: Atop, left: Aleft, width: Awidth, height: Aheight} = item
      
              lines.y.push({showTop: Atop, top: Atop}) 
              lines.y.push({showTop: Atop, top: Atop - Bheight})
              lines.y.push({showTop: Atop + Aheight / 2, top: Atop + Aheight/2 - Bheight/2})
              lines.y.push({showTop: Atop + Aheight,  top: Atop + Aheight})
              lines.y.push({showTop: Atop + Aheight, top: Atop +Aheight - Bheight})

              lines.x.push({showLeft: Aleft, left: Aleft})
              lines.x.push({showLeft: Aleft+ Awidth, left: Aleft+ Awidth})
              lines.x.push({showLeft: Aleft + Awidth/2, left: Aleft + Awidth/2 - Bwidth/2})
              lines.x.push({showLeft: Aleft + Awidth, left: Aleft + Awidth - Bwidth})
              lines.x.push({showLeft: Aleft, left: Aleft - Bwidth})
            })

            return lines
      
          })()
        }

        document.addEventListener("mousemove", mousemove);
        document.addEventListener("mouseup", mouseup);
      };
  
      const mousemove = (e) => {
        
        let { clientX: moveX, clientY: moveY } = e

        // 计算当前的元素的最新left和top，去线里面找，找到显示的线
        // 鼠标移动后 - 鼠标移动前 + left
        const left = moveX - dragState.startX + dragState.startLeft
        const top = moveY - dragState.startY + dragState.startTop

        let durX = moveX - dragState.startX
        let durY = moveY - dragState.startY

        // 先计算横线距离参照物还有5像素的时候就是显示的这根线
        let y = null
        let x= null
        for(let i=0; i<dragState.lines.y.length; i++) {
          const {top: t, showTop: s} = dragState.lines.y[i] 
          if(Math.abs(t - top) < 5) { // 如果小于5说面接近了
            y = s
            durY = durY + (t - top)
            break
          }
        }

        for(let i=0; i<dragState.lines.x.length; i++) {
          const {left: l, showLeft: s} = dragState.lines.x[i] 
          if(Math.abs(l - left) < 5) { // 如果小于5说面接近了
            x = s
            durX = durX + (l - left)
            break
          }
        }

        markLine.x = x 
        markLine.y = y

        focusData.value.focus.forEach((item, index) => {
          item.top = dragState.startPositon[index].top + durY
          item.left = dragState.startPositon[index].left + durX
        })
      };
  
      const mouseup = (e) => {
        document.removeEventListener("mousemove", mousemove);
        document.removeEventListener("mouseup", mouseup);
      };

      return {
        mousedown,
        mousemove,
        mouseup,
        markLine
      }
};

// dragState.startPositon[index].top - dragState.startTop + t 